<!DOCTYPE html>
<html lang="en">
<head>
    <!--块注释快捷键：ctrl+shift+/-->
    <meta charset="UTF-8">
    <title>小米</title>
    <link rel="icon" href="images/favicon.ico"><!--网页图标-->
    <link rel="stylesheet" href="css/reset.css"><!--全局图标样式-->
    <link rel="stylesheet" href="css/iconfont.css"><!--字体图标样式-->
    <link rel="stylesheet" href="css/mi.css"><!--自己的样式表-->
</head>
<body>
<!--头部开始-->
<div class="header">
<div class="wrap">
    <!--ul>li*13>a[href=#]+tab键快速输入13行-->
    <ul class="header-left">
        <li><a href="#">小米商城</a><span>|</span></li>
        <li><a href="#">MIUI</a><span>|</span></li>
        <li><a href="#">loT</a><span>|</span></li>
        <li><a href="#">云服务</a><span>|</span></li>
        <li><a href="#">天星数科</a><span>|</span></li>
        <li><a href="#">有品</a><span>|</span></li>
        <li><a href="#">小爱开放平台</a><span>|</span></li>
        <li><a href="#">企业团购</a><span>|</span></li>
        <li><a href="#">资质证照</a><span>|</span></li>
        <li><a href="#">协议规则</a><span>|</span></li>
        <li>
            <a href="#">下载app</a><span>|</span>
            <!--tab键可补全代码：div.download-->
            <div class="download">
                <a href="#">
                    <img src="images/download.png" alt="">
                    <p>
                        小米商城APP
                    </p>
                </a>
            </div>
            <div class="trangle">

            </div>
        </li>
        <li><a href="#">智能生活</a><span>|</span></li>
        <li><a href="#">Select Location</a></li>
    </ul>
    <ul class="header-right">
        <li><a href="#">登录</a><span>|</span></li>
        <li><a href="#">注册</a><span>|</span></li>
        <li><a href="#">消息通知</a></li>
        <li class="cart">
            <a href="#">
                <i class="iconfont">&#xe6a0;</i>购物车(0)<!--购物车旁边的图片暂时没法显示！-->
            </a>
            <div class="cart-list">
                购物车中还没有商品，赶紧选购吧！
            </div>
        </li><!--购物车左边有字体图标--><!--i和span在这作用一样，只要是行内标间就行-->
    </ul>
</div>
</div>
<!--头部结束-->
<!--导航开始-->
<div class="nav">
    <div class="wrap">
        <div class="logo">
            <a href="#">
                <img src="images/logo.png" alt="">
            </a>
        </div><!--logo-->
        <div class="nav-bar"><!--导航栏-->
            <ul>
                <li>
                    <a href="#">Xiaomi手机</a>
                    <div class="nav-bar-list">
                        <div class="wrap">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div>
                                            <img src="images/Xiaomi手机1.png" alt="">
                                        </div>
                                        <p>Xiaomi 11 青春活力版</p>
                                        <p>1999元起</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li><a href="#">Redmi红米</a></li>
                <li><a href="#">电视</a></li>
                <li><a href="#">笔记本</a></li>
                <li><a href="#">平板</a></li>
                <li><a href="#">家电</a></li>
                <li><a href="#">路由器</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">社区</a></li>
            </ul>
        </div>
        <div class="search"></div><!--搜索框-->
    </div>
</div>
<!--导航结束-->
</body>
</html>